<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudyDemo</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <div><a href="index.html">返回首页</a></div><hr>
    <h1>Nested Named Views</h1>
    <router-link to="/main/email/">/main/email</router-link>
    <router-view></router-view>
</div>
<script>
    // 导航
    const Nav = {
        template: `
        <div>
            <router-link to="/main/email">/main/email</router-link><br>
            <router-link to="/main/profile">/main/profile</router-link>
        </div>
        `
    }
    // 主模板, 并给子路由留下子插口
    const Main = {
        // 引入导航子组件
        components: { Nav },
        template: `
        <div>
            <h2>Main</h2>
            <Nav/>
            <router-view></router-view>
            <router-view name="helper"></router-view>
        </div>
        `
    }
    const Email = {
        template: `
        <div>
            <h3>Email</h3>
        </div>
        `
    }
    const Profile = {
        template: `
        <div>
            <h3>Profile</h3>
        </div>
        `
    }
    const Helper = {
        template: `
        <div>
            <h3>Helper</h3>
        </div>
        `
    }
    // 重点来了
    const router = new VueRouter({
        // mode: 'history',
        routes: [
            {
                path: '/main',
                component: Main,
                children: [
                    {
                        // 错误3 写成'/email'
                        path: 'email',
                        // 如果没有针对命名插口，命名插口将被忽略，组件将插入默认插口,必须为子组件预留子插口
                        component: Email
                    },
                    {
                        // 错误2： 写成 '/profile'
                        path: 'profile',
                        // 有了命名插口中，一条路由可以装两个组件了
                        // 错误1： 写成component
                        components: {
                            default: Profile,
                            helper: Helper
                        }
                    }
                ]
            }
        ]
    })

    // 实例化Vue
    new Vue({
        router,
        el: '#app'
    })
</script>
</body>
</html>